<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <p>我是div内本身的p标签</p>
        <span>我是div内部本身的span标签</span>
        <p>我是div内本身的p标签</p>
    </div>
    
    <script>
        // 1 创建节点
        // var div = document.createElement('div')
        // console.log(div)


        // 2-1 插入节点
        // 创建一个span标签
        // var span = document.createElement('span')
        // // 向span内添加一些文本内容
        // span.innerText = '我是创建出来的span标签'
        // // 输出一下
        // console.log(span)

        // // 获取到页面上的div元素
        // var div = document.querySelector('div')
        // // 把创建的span标签插入到div内部
        // div.appendChild(span)

        // // 2-2 插入节点
        // // 创建一个span标签
        // var span = document.createElement('span')
        // // 向span内添加一些文本内容
        // span.innerText = '我是创建出来的span标签'
        // // 输出一下
        // console.log(span)

        // // 获取到页面上的div元素
        // var div = document.querySelector('div')
        // // 获取到div内部本身的p标签
        // var p = document.querySelector('p')
        // // 把创建的span变迁插入到div内部，并且放在p标签的前面
        // div.insertBefore(span,p)


        // // 3-1 删除节点
        // // 获取到div元素
        // var div = document.querySelector('div')
        // // 获取p元素
        // var p = document.querySelector('p')
        // // 从div内删除p元素
        // div.removeChild(p)

        // // 3-2 删除节点
        // // 获取到div元素
        // var div = document.querySelector('div')
        // // 把div删除
        // div.remove()


        // // 4 替换节点
        // // 创建一个i标签
        // var i = document.createElement('i')
        // // 给i标签内加文本
        // i.innerText = '我是被创建出来的i标签'
        // // 获取到div元素
        // var div = document.querySelector('div')
        // // 获取span元素
        // var span = document.querySelector('span')
        // // 替换
        // div.replaceChild(i,span)


        // 5 克隆节点
        // 获取div元素
        var div = document.querySelector('div')
        // 克隆div，不克隆后代元素
        var clone1 = div.cloneNode(false)
        // 克隆div，克隆后代元素
        var clone2 = div.cloneNode(true)
        // 输出
        console.log('不克隆后代节点：',clone1)
        console.log('克隆后代节点：',clone2)

    </script>

</body>
</html>